<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GPS管线巡检体统</title>

<link href="__PUBLIC__/mapsDemo/mapsDemo.css" rel="stylesheet"
	type="text/css" />
<script src="__PUBLIC__/mapsDemo/main.js" type="text/javascript"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script src="__PUBLIC__/mapsDemo/prototype.lite.js"
	type="text/javascript"></script>
<script src="__PUBLIC__/mapsDemo/moo.fx.js" type="text/javascript"></script>
<script src="__PUBLIC__/mapsDemo/moo.fx.pack.js" type="text/javascript"></script>

</head>

<body>
	<div id="container">
		<div id="header">管线巡检系统</div>
		<div id="menu">
			<div class="table">
				<ul class="select">
					<li><a><b onclick="loadLines()">巡检线路</b></a>
						<div class="select_sub">
							<ul class="sub" id="lines">
							</ul>
						</div></li>
					<li><a href="__APP__/Admin/login"><b>后台管理入口</b></a></li>
					<li><a onclick="update()"><b>巡检监视</b></a></li>
					<li><a onclick="stopUpdate()"><b>停止监视</b></a></li>
					<li><a href="__APP__/Index/exitLogin"><b>退出登录</b></a></li>
				</ul>
			</div>

			<div class="table">
				<ul class="select">

				</ul>
			</div>
		</div>

		<div id="mainContent">
			<div id="content"></div>
		</div>

	</div>
</body>
</html>

<script type="text/javascript">

//设置maps高度
		var contents = document.getElementsByClassName('content1');
		var toggles = document.getElementsByClassName('title');
		
		var myAccordion = new fx.Accordion(
			toggles, contents, {opacity: true, duration: 400}
		);
		myAccordion.showThisHideOpen(contents[0]);
	
		var windowH =document.documentElement.clientHeight;//窗口可视区域的高度
		var windowB = document.body.clientHeight;
		var headerH = document.getElementById("header").offsetHeight;//header的高度
		var menuH = document.getElementById("menu").offsetHeight;//menu的高度
		var mapH = document.getElementById("content").style.height = windowH - headerH - menuH - 10 + "px";
	

	
// 	读取巡检线路
	function loadLines(){
		var xmlHttp = false;
		if(window.ActiveXObject){
			try {
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} 
		else if(window.XMLHttpRequest){
			xmlHttp = new XMLHttpRequest();
		}	
		var url = "__URL__/loadLines";
		if(!xmlHttp){
			alert("XMLHttpRequest is not Create!");
		}
		xmlHttp.open("GET",url,true);
		xmlHttp.onreadystatechange = function(){
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
				var data = xmlHttp.responseText;
				var obj = JSON.parse(data);
				var lines = new Array();
				lines = obj.lines;
				var innerhtml="";
				for(i=0;i<lines.length;i++){
					// innerhtml = innerhtml+"<li onclick='showLines(this.id)' id="+lines[i]['line_id']+"><a"+">"+lines[i]['name']+"</a></li>";
					innerhtml = innerhtml+"<li><input type='checkbox' id="+lines[i]['line_id']+" onclick='showLines(this)'>"+lines[i]['name']+"</li>";
				}
				document.getElementById("lines").innerHTML  = innerhtml;
			}
		}
		xmlHttp.send(null);
	}
	


// 显示线路
	var polyline = new Array();
	function showLines(object){
		// alert(obj.id);

		var xmlHttp =false;
		if(window.ActiveXObject){
			try {
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}	
		} 
		else if(window.XMLHttpRequest){
			xmlHttp = new XMLHttpRequest();
		}	
		
		var url = "__URL__/loadNodes?line_id="+object.id;
		if(!xmlHttp){
			alert("XMLHttpRequest is not Create!");
		}
		xmlHttp.open("GET",url,true);
		xmlHttp.onreadystatechange = function(){
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
				var data = xmlHttp.responseText;
				var obj = JSON.parse(data);
				var nodes = new Array();
				nodes = obj.nodes;
				length = nodes.length;
				var points = new Array();
				var marker = new Array();
				var infoWindow = new Array();
				// map.clearOverlays();
				for (i = 0; i < length; i++) {
					points[i] = new BMap.Point(nodes[i].longitude,nodes[i].latitude);
				}
				if(!polyline[object.id]){
					polyline[object.id] = new BMap.Polyline(points, {strokeColor:"red", strokeWeight:6, strokeOpacity:0.5});
				}
				
				if(object.checked==true){
					addLinesToMaps(polyline[object.id]);
				} else{
					removeLinesFromMaps(polyline[object.id]);				
				}
			}	
		}
		xmlHttp.send(null);

	
	}
	
//	为marker添加信息弹窗
	function addMarkerInfowindow(marker,infowindow){
		marker.addEventListener("click",function(){this.openInfoWindow(infowindow)});
	}
	
// 	将管线添加到地图上
	function addLinesToMaps(polyline){
		map.addOverlay(polyline);
		polyline.disableMassClear();
	}
// 	将管线从地图上移除
	function removeLinesFromMaps(polyline){
		map.removeOverlay(polyline);
		
	}

	
	
	//与地图有关	
	var map = new BMap.Map("content",{mapType:BMAP_HYBRID_MAP});
	map.centerAndZoom(new BMap.Point(114.2726486277,30.447122443619), 18);

	map.addControl(new BMap.MapTypeControl()); 
	map.addControl(new BMap.NavigationControl());
	map.addControl(new BMap.ScaleControl());                 

	map.setCurrentCity("武汉");         
	map.enableScrollWheelZoom();

	var polyline = new BMap.Polyline([
		new BMap.Point(114.26908881899,30.446357364436),
		new BMap.Point(114.27052838908,30.446074226591),
  		new BMap.Point(114.27042025325,30.44539716527),
  		new BMap.Point(114.27223169532,30.445120014538),
  		new BMap.Point(114.2726486277,30.447122443619),
		new BMap.Point(114.27394939224,30.447878432885),
		new BMap.Point(114.27648855711,30.447560237938),
		new BMap.Point(114.27684354697,30.44936269666),

	], {strokeColor:"red", strokeWeight:6, strokeOpacity:0.5});
	
	
	var xmlHttp = false;
	var timeout = null;
	function createXmlHttp(){
		if(window.ActiveXObject){
			try {
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
	
			} catch (e) {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
		}		
		else if(window.XMLHttpRequest){
			xmlHttp = new XMLHttpRequest();
		}
	}
	function sendRequest(){
		createXmlHttp();
		var url = "__URL__/getGpsData";
		if(!xmlHttp){
			alert("XMLHttpRequest is not Create!");
		}
		xmlHttp.open("GET",url,true);

		xmlHttp.onreadystatechange = function(){
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
				var data = xmlHttp.responseText;
				var obj = JSON.parse(data);
				var lon = parseFloat(obj.longitude);
				var lat = parseFloat(obj.latitude);
				map.clearOverlays()
				//alert(lon);

				var markerNow = new BMap.Marker(new BMap.Point(lon,lat));  // 创建标注
				map.addOverlay(markerNow);              // 将标注添加到地图中
//				markerNow.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
			}
		}
		xmlHttp.send(null);
	}
	function update(){
		timeout = window.setInterval("sendRequest()",4000);
	}
	function stopUpdate(){
		if(timeout != null){
			window.clearInterval(timeout);
		}
	}
	</script>